css 如何使文字垂直居中

单行文本

单行文本只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

<!--html代码-->
<div id="div1">
    这是单行文本垂直居中
</div>

/*css代码*/
<style>
#div1 {
    width: 300px;
    height: 100px;
    margin: 50px auto;
    border: 1px solid red;
    line-height: 100px; /*设置line-height与父级元素的height相等*/
    text-align: center; /*设置文本水平居中*/
    overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}
</style>

显示结果:

这是单行文本垂直居中

多行文本

多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

<!--html代码-->
<div id="div1">

    这是多行文本垂直居中，

    这是多行文本垂直居中，

    这是多行文本垂直居中，

    这是多行文本垂直居中。
</div>

/*css代码*/
<style>
#div1{
    width: 300px;
    margin: 50px auto;
    border: 1px solid red;
    text-align: center; /*设置文本水平居中*/
    padding: 50px 20px;
}
</style>

显示结果：

这是多行文本垂直居中，

这是多行文本垂直居中，

这是多行文本垂直居中，

这是多行文本垂直居中。

父级高度固定的时，设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle

<div id="outer">

    <div id="middle">

    这是固定高度多行文本垂直居中，

    这是固定高度多行文本垂直居中，

    这是固定高度多行文本垂直居中，

    这是固定高度多行文本垂直居中。

    </div>
</div> 
<style>
#outer{
    width: 400px;
    height: 200px;
    margin: 50px auto;
    border: 1px solid red;
    display: table;
}

#middle{
    display:table-cell;
    vertical-align:middle;
    text-align: center; /*设置文本水平居中*/
    width:100%;
}
</style>

显示结果:

这是固定高度多行文本垂直居中，

这是固定高度多行文本垂直居中，

这是固定高度多行文本垂直居中，

这是固定高度多行文本垂直居中。